<template>
  <div class="material-detail-container">
    <div class="detail-header">
      <view
        class="back-btn"
        @click="goBack"
      >
        <i class="iconfont icon-arrow-left"></i>
        <span>返回</span>
      </view>
      <h2 class="title">素材详情</h2>
    </div>

    <div class="detail-content">
      <div class="order-info-card">
        <div class="info-header">
          <h3>{{ orderData.customer_name }} - {{ orderData.type }}</h3>
          <span
            class="status-badge"
            :class="getMaterialClass(orderData.has_material)"
          >
            {{ getMaterialText(orderData.has_material) }}
          </span>
        </div>

        <div class="info-content">
          <div class="info-row">
            <span class="label">订单号:</span>
            <span class="value">{{ orderData.order_number }}</span>
          </div>
          <div class="info-row">
            <span class="label">日期:</span>
            <span class="value">{{ formatDateRange(orderData.start_date, orderData.end_date) }}</span>
          </div>
          <div class="info-row">
            <span class="label">摄影师:</span>
            <span class="value">{{ orderData.member_name || '未分配' }}</span>
          </div>
          <div class="info-row">
            <span class="label">客户姓名:</span>
            <span class="value">{{ orderData.customer_name }}</span>
          </div>
          <div class="info-row">
            <span class="label">联系电话:</span>
            <span class="value">{{ orderData.phone }}</span>
          </div>
          <div class="info-row">
            <span class="label">订单金额:</span>
            <span class="value">¥{{ orderData.total_amount }}</span>
          </div>
          <div class="info-row">
            <span class="label">支付方式:</span>
            <span class="value">{{ orderData.payment_method }}</span>
          </div>
          <div
            class="info-row"
            v-if="orderData.note"
          >
            <span class="label">备注:</span>
            <span class="value">{{ orderData.note }}</span>
          </div>
        </div>
      </div>

      <!-- 动态显示素材部分 -->
      <div class="material-section">
        <div class="section-header">
          <div class="header-line"></div>
          <h3 class="header-text">素材管理</h3>
        </div>

        <!-- 已上传素材的情况 -->

        <!-- 无需备份的情况 -->
        <div
          class="no-need-section"
          v-if="orderData.has_material === '2'"
        >
          <div class="no-need-tip">
            <i class="iconfont icon-check-circle"></i>
            <span>此订单无需上传素材</span>
          </div>
        </div>

        <!-- 未上传素材的情况 -->
        <div
          class="upload-section"
          v-else
        >
          <div class="upload-form">
            <div class="form-group">
              <label>
                <i class="iconfont icon-link"></i>
                素材链接 <span class="required">*</span>
              </label>
              <textarea
                v-model="materialLink"
                placeholder="请输入素材链接(支持网盘等链接)"
                class="form-textarea"
                rows="3"
              ></textarea>
            </div>
            <button
              class="submit-btn"
              @click="submitMaterial"
              :disabled="!materialLink"
            >
              <i class="iconfont icon-correct"></i>
              <span>提交素材</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { get, post } from "@/request";
import { vToast } from "@/plugins/vToast";
const route = useRoute();
const router = useRouter();

const orderData = ref({});
const materialLink = ref("");
const previewImages = ref([]);

const goBack = () => {
  router.go(-1);
};

// 获取订单详情
const fetchOrderDetail = async () => {
  try {
    const res = await get(`/order/detail?id=${route.query.id}`);
    if (res && res.code === 200) {
      orderData.value = res.data;
      materialLink.value = res.data.m_link || "";
    }
  } catch (error) {
    vToast({message:`获取订单详情失败:${error}`});
  }
};

// 提交素材
const submitMaterial = async () => {
  try {
    const res = await post("/material/upload", {
      order_id: orderData.value.id,
      m_link: materialLink.value,
    });

    if (res && res.code === 200) {
      vToast({message:res.msg});
      await fetchOrderDetail();
    }
  } catch (error) {
     vToast({message:`上传素材失败:${error}`});
  }
};

// 格式化日期范围
const formatDateRange = (startDate, endDate) => {
  if (startDate === endDate) return startDate;
  return `${startDate} 至 ${endDate}`;
};

// 获取素材状态文本
const getMaterialText = (status) => {
  console.log(status);
  switch (status) {
    case "0":
      return "未上传";
    case "1":
      return "已上传";
    case "2":
      return "无需备份";
    default:
      return "未知";
  }
};

// 获取素材状态类名
const getMaterialClass = (status) => {
  switch (status) {
    case "0":
      return "no-material";
    case "1":
      return "has-material";
    case "2":
      return "no-need";
    default:
      return "";
  }
};

onMounted(() => {
  fetchOrderDetail();
});
</script>

<style lang="less" scoped>
.material-detail-container {
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.detail-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  justify-content: space-between;

  .back-btn {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: #606266;
    cursor: pointer;
    font-size: 14px;
    margin-right: 20px;

    &:hover {
      color: var(--bs-theme-color);
    }
    .iconfont {
      margin-right: 5px;
    }
  }

  .title {
    margin: 0;
    font-size: 24px;
    font-weight: lighter;
    padding-right: 20px;
  }
}

.order-info-card {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

  .info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--bs-border-color);

    h3 {
      margin: 0;
      font-size: 16px;
    }

    .status-badge {
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 12px;

      &.no-material {
        background-color: #fef0f0;
        color: #f56c6c;
      }

      &.has-material {
        background-color: #f0f9eb;
        color: #67c23a;
      }

      &.no-need {
        background-color: #f4f4f5;
        color: #909399;
      }
    }
  }

  .info-content {
    .info-row {
      display: flex;
      margin-bottom: 10px;
      font-size: 14px;

      .label {
        color: var(--bs-gray-color);
        margin-right: 10px;
        width: 80px;
      }

      .value {
        color: var(--bs-text-color);
      }
    }
  }
}

.material-section {
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;

    .header-line {
      width: 4px;
      height: 16px;
      background-color: var(--bs-theme-color);
      margin-right: 10px;
      border-radius: 2px;
    }

    .header-text {
      font-size: 16px;
      font-weight: bold;
      color: var(--bs-dark-color);
    }
  }

  .material-content {
    .material-link {
      display: flex;
      align-items: center;
      margin-bottom: 15px;

      .iconfont {
        margin-right: 8px;
        color: var(--bs-theme-color);
      }

      a {
        color: var(--bs-theme-color);
        word-break: break-all;
      }
    }

    .preview-tip {
      display: flex;
      align-items: center;
      color: var(--bs-gray-color);
      font-size: 14px;

      .iconfont {
        margin-right: 8px;
      }
    }

    .preview-images {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 15px;

      .preview-item {
        border: 1px solid var(--bs-border-color);
        border-radius: 4px;
        overflow: hidden;

        img {
          width: 100%;
          height: auto;
          display: block;
        }
      }
    }
  }

  .no-need-section {
    padding: 20px;
    text-align: center;

    .no-need-tip {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #909399;
      font-size: 14px;

      .iconfont {
        margin-right: 8px;
        color: #67c23a;
        font-size: 18px;
      }
    }
  }

  .upload-form {
    .form-group {
      margin-bottom: 15px;

      label {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: var(--bs-nav-link-color);
        margin-bottom: 8px;

        .iconfont {
          margin-right: 6px;
          font-size: 14px;
        }

        .required {
          color: #f56c6c;
          margin-left: 4px;
        }
      }

      .form-textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid var(--bs-border-color);
        border-radius: 4px;
        font-size: 14px;
        transition: all 0.3s;
        background: white;
        resize: vertical;
        min-height: 80px;

        &:focus {
          outline: none;
          border-color: var(--bs-theme-color);
          box-shadow: 0 0 0 2px rgba(0, 145, 190, 0.1);
        }
      }
    }

    .submit-btn {
      padding: 10px 20px;
      background-color: var(--bs-theme-color);
      color: white;
      border: none;
      border-radius: 4px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: all 0.3s;

      &:hover:not(:disabled) {
        background-color: var(--bs-dark-color);
      }

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }
    }
  }
}
</style>